import React from 'react';
import { Modal, Form } from 'antd';
import { componentsMap } from '@/utils/util';
import { useEffect, useState } from 'react';
import API from '@/api';
import { connect } from 'umi';
import moment from 'moment';

const CreateModal = ({
  visible,
  onCreate,
  onCancel,
  id,
  status,
  orgOptions,
}) => {
  const [form] = Form.useForm();
  const [alarmPersonList, setAlarmPersonList] = useState([]);
  const formList = [
    {
      name: 'name',
      title: '组织名称',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入组织名称',
        },
      ],
    },
    {
      name: 'type',
      title: '组织属性',
      type: 'select',
      rules: [
        {
          required: true,
          message: '请选择组织属性',
        },
      ],
      otherProps: {
        options: orgOptions,
      },
    },
    {
      name: 'pid',
      type: 'select',
      title: '上级组织',
      otherProps: {
        options: [
          {
            label: '江苏省交通厅',
            value: 101,
          },
        ],
        disabled: true,
      },
      rules: [
        {
          required: true,
          message: '请选择上级组织',
        },
      ],
    },
    {
      name: 'createUserName',
      type: 'input',
      title: '创建人',
      rules: [
        {
          required: true,
          message: '请输入创建人',
        },
      ],
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'createTime',
      type: 'input',
      title: '创建时间',
      rules: [
        {
          required: true,
          message: '请选择创建时间',
        },
      ],
      otherProps: {
        disabled: true,
      },
    },
    // {
    //   name: 'alarmPersonName',
    //   type: 'select',
    //   title: '负责人',
    //   // rules: [
    //   // {
    //   //     required: true,
    //   //     message: '请输入负责人',
    //   // },
    //   // ],
    // },
    // {
    //   name: 'alarmPersonPhone',
    //   type: 'input',
    //   title: '负责人电话',
    //   rules: [
    //     // {
    //     //   required: true,
    //     //   message: '请输入负责人电话',
    //     // },
    //     // {
    //     //   pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
    //     //   message: '手机号格式不正确',
    //     // },
    //   ],
    // },
    {
      name: 'info',
      type: 'textarea',
      title: '组织描述',
      isBlock: true,
    },
  ];
  const formListEdit = [
    {
      name: 'alarmPersonName',
      type: 'select',
      title: '负责人',
      rules: [
        {
          required: true,
          message: '请输入负责人',
        },
      ],
      otherProps: {
        options: alarmPersonList,
      },
    },
    {
      name: 'alarmPersonPhone',
      type: 'input',
      title: '负责人电话',
      rules: [
        {
          required: true,
          message: '请输入负责人电话',
        },
      ],
    },
  ];
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  const initState = () => {
    if (id) {
      API.org_selectOrgById({ id }).then((res) => {
        if (res?.t) {
          const {
            name,
            info,
            createTime,
            type,
            createUserName,
            alarmPersonName,
            alarmPersonPhone,
          } = res.t;
          form.setFieldsValue({
            name,
            info,
            pid: 101,
            type,
            createTime,
            createUserName,
            alarmPersonName,
            alarmPersonPhone,
          });
        }
      });
      API.org_selectAlarmPersonList({ id }).then((res) => {
        console.log('负责人列表', res);
        if (res?.t) {
          setAlarmPersonList(
            // res.t.map((item) => {
            //   return {
            //     label: item.name,
            //     value: item.id,
            //   };
            // }),
            [
              {
                name: 'alarmPersonName',
                type: 'select',
                title: '负责人',
                rules: [
                  {
                    required: true,
                    message: '请输入负责人',
                  },
                ],
                otherProps: {
                  options: res.t.map((item) => {
                    return {
                      label: item.name,
                      value: item.id,
                    };
                  }),
                },
              },
              {
                name: 'alarmPersonPhone',
                type: 'input',
                title: '负责人电话',
                rules: [
                  {
                    required: true,
                    message: '请输入负责人电话',
                  },
                ],
              },
            ],
          );
        }
      });
    } else {
      form.setFieldsValue({
        pid: 101,
        createTime: moment().format('YYYY-MM-DD'),
        createUserName: localStorage.getItem('username'),
      });
    }
  };
  useEffect(() => {
    if (visible) {
      form.resetFields();
      initState();
    }
  }, [visible]);
  const titleMap = ['新增组织', '组织详情', '编辑组织'];
  return (
    <Modal
      visible={visible}
      title={titleMap[status]}
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      maskClosable={false}
      destroyOnClose
      footer={status === 1 ? null : undefined}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        {...formItemLayout}
        name="form_in_modal"
        preserve={false}
      >
        {status === 1
          ? formList.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.title}
                  name={item.name}
                  className={item.isBlock ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, status === 1)}
                </Form.Item>
              );
            })
          : alarmPersonList.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.title}
                  name={item.name}
                  className={item.isBlock ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps, status === 1)}
                </Form.Item>
              );
            })}
      </Form>
    </Modal>
  );
};

export default connect(({ dict }) => ({
  orgOptions: dict.orgOptions,
}))(CreateModal);

// export default CreateModal
